<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <h2>年龄:{{age}}岁</h2>
      <button ng-click="addAge()">年龄增加</button>
      <!-- 自定义组件 -->
      <hello-world my-name="childName" my-age="age"></hello-world>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "我是传到组件中的信息";
        $scope.age = 18;
        $scope.addAge = function(){
            $scope.age++;
        }
      });
      app.component("helloWorld",{
        restrict: "E",
        template:`
            <div>
                <h3>自定义组件</h3>
                <div>{{$ctrl.myName}}</div>
                <div>{{scopeName}}</div>
                <div>{{$ctrl.thisName}}</div>
                <h2>子组件的年龄:{{myAge}}岁</h2>
            </div>
        `,
        bindings:{
            myName:"<",
            myAge:"<"
        },
        controller:function($scope){
            console.log(this.myName); // 未经过初始化是undefined
            this.$onInit = function(){
                console.log('$onInit',this.myName);
                $scope.myAge = this.myAge;
            }
            this.$onChanges = function(changes){
                console.log(changes);
                $scope.myAge = changes.myAge.currentValue;
            }
            $scope.scopeName = "controller的$scope中绑定的属性";
            this.thisName = "controller的this中绑定的属性";
        }
      })
    </script>
  </body>
</html>
